<template>
  <div :class="cls">
    <slot />
  </div>
</template>

<script setup lang="ts" name="Timeline">
  import { timelineProps } from '../../props'
  import { timelineInjectionKey } from '../../type'

  const props = defineProps(timelineProps)

  const {
    reverse: reverseRef,
    direction: directionRef,
    labelPosition: labelPositionRef,
    mode: modeRef
  } = toRefs(props)

  const timelineContext = reactive({
    direction: directionRef,
    reverse: reverseRef,
    labelPosition: labelPositionRef,
    mode: modeRef
  })
  provide(timelineInjectionKey, timelineContext)

  const cls = computed(() => {
    return [
      'pro-timeline',
      `pro-timeline-${props.mode}`,
      `pro-timeline-direction-${props.direction}`,
      {
        [`pro-timeline-is-reverse`]: props.reverse
      }
    ]
  })
</script>

<style scoped lang="less">
  @import '../../style/index.less';
</style>
